import React, {Component} from 'react';
import {Link} from 'react-router-dom'

class TabList extends Component {
    state = {
        myHeight: 0,
    }

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        this.setState({
            myHeight:0
        })
        if (nextProps.index === nextProps.myIndex){
            this.setState({
                myHeight:nextProps.item.length * 46
            })
        }
    }
    render() {
        return(
            <div>
                <ul style={{height:this.state.myHeight+'px',backgroundColor:'#233645'}}>
                    {this.props.item.map((item)=>{
                        return (
                            <li key={item.key} ><Link to={item.path}>{item.name}</Link></li>
                        )
                    })}
                </ul>
            </div>
        )

    }
}

export default TabList;





